<!--
 * @Description: 请假管理 - 主页面
 * @Author: DHL
 * @Date: 2022-12-23 13:52:43
 * @LastEditors: DHL
 * @LastEditTime: 2022-12-23 14:19:05
-->
<template>
  <tw-layout @refresh="handleRefresh" @search="handleSearch" @reset="handleReset">
    <!-- 按钮组 -->
    <template #btns>
      <el-button
        class="item"
        type="danger"
        :loading="loadingByDel"
        :disabled="isSelectRows"
        v-auth="`LEAVE-DEL-LOGIC-BATCH`"
        @click="handleDelete()"
      >
        <svg-icon iconClass="delete"></svg-icon>
        批量删除
      </el-button>

      <el-button class="item" type="primary" v-auth="`LEAVE-ADD`" @click="handleOpenForm('add')">
        <svg-icon iconClass="plus"></svg-icon>
        新增
      </el-button>
    </template>

    <!-- 查询表单 -->
    <template #header>
      <el-form ref="searchFormRef" :model="searchForm" label-width="90px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="主键">
              <el-input v-model="searchForm.id" clearable placeholder="请输入主键"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="创建人">
              <el-input
                v-model="searchForm.creator"
                clearable
                placeholder="请输入创建人"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="更新人">
              <el-input
                v-model="searchForm.updater"
                clearable
                placeholder="请输入更新人"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="searchForm.createDate"
                type="datetime"
                clearable
                placeholder="请选择创建时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="更新时间">
              <el-date-picker
                v-model="searchForm.updateDate"
                type="datetime"
                clearable
                placeholder="请选择更新时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="名称">
              <el-input v-model="searchForm.name" clearable placeholder="请输入名称"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="编码">
              <el-input v-model="searchForm.code" clearable placeholder="请输入编码"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="类型">
              <el-select v-model="searchForm.type" clearable placeholder="请选择类型">
                <tw-dic dicKey="OA_LEAVE_TYPE"></tw-dic>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="开始时间">
              <div class="flex-space-between">
                <el-date-picker
                  v-model="searchForm.beginTimeBegin"
                  type="datetime"
                  clearable
                  placeholder="请输入开始时间-开始"
                ></el-date-picker>
                <div class="split-line">-</div>
                <el-date-picker
                  v-model="searchForm.beginTimeEnd"
                  type="datetime"
                  clearable
                  placeholder="请输入开始时间-结束"
                ></el-date-picker>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="结束时间">
              <div class="flex-space-between">
                <el-date-picker
                  v-model="searchForm.endTimeBegin"
                  type="datetime"
                  clearable
                  placeholder="请输入结束时间-开始"
                ></el-date-picker>
                <div class="split-line">-</div>
                <el-date-picker
                  v-model="searchForm.endTimeEnd"
                  type="datetime"
                  clearable
                  placeholder="请输入结束时间-结束"
                ></el-date-picker>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="时长">
              <div class="flex-space-between">
                <el-input-number
                  v-model="searchForm.durationBegin"
                  clearable
                  placeholder="请输入时长-开始"
                />
                <div class="split-line">-</div>
                <el-input-number
                  v-model="searchForm.durationEnd"
                  clearable
                  placeholder="请输入时长-结束"
                />
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="事由">
              <el-input v-model="searchForm.because" clearable placeholder="请输入事由"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>

    <!-- 数据表格 -->
    <tw-table
      ref="tableRef"
      :loading="loading"
      :options="tableOptions"
      :events="tableEvents"
      :data="tableData"
      @search="searchList"
      exportExcelAuthKey="LEAVE-EXPORTEXCEL"
      @exportExcel="handleExport"
    >
      <template #action="{ row }">
        <el-button link type="warning" v-auth="`LEAVE-EDIT`" @click="handleOpenForm('edit', row)">
          编辑
        </el-button>
        <el-button link type="danger" v-auth="`LEAVE-DEL-LOGIC-BATCH`" @click="handleDelete(row)">
          删除
        </el-button>
      </template>
    </tw-table>

    <leaveForm ref="formRef" @refreshTableData="handleRefresh"></leaveForm>
  </tw-layout>
</template>

<script src="./useIndex.ts"></script>

<style scoped lang="scss"></style>
